<template>
  <div>
    <Dropdown trigger="click">
      <a href="javascript:void(0)">
        下拉菜单11111111
        <Icon type="ios-arrow-down"></Icon>
      </a>
      <template #list>
        <DropdownMenu>
          <DropdownItem v-for="(item, index) in colorList" :key="index">
            <div>
              <span
                class="co-item"
                :style="{ 'background-color': item2 }"
                v-for="(item2, idx) in item.color"
                :key="idx"
              ></span>
            </div>
          </DropdownItem>
        </DropdownMenu>
      </template>
    </Dropdown>
    <div>vue</div>
    <div>react</div>
    <div>js</div>
    <Col span="12">
      <DatePicker
        type="year"
        :options="options2"
        placement="bottom-end"
        placeholder="Select date"
        style="width: 200px"
      ></DatePicker>
    </Col>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  components: {},
  props: {},
  data() {
    return {
      options2: {
        shortcuts: [
          {
            text: '1 month',
            value() {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              return [start, end]
            },
          },
          {
            text: '3 months',
            value() {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              return [start, end]
            },
          },
        ],
      },
      colorList: [
        {
          name: 'color1',
          selected: false,
          color: ['#85a5ff', '#597ef7', '#2f54eb', '#1d39c3', '#10239e', '#061178', '#030852'],
        },
        {
          name: 'color2',
          selected: false,
          color: ['#00ced1', '#1e90ff', '#c71585', '#40e0d0', '#17a2b8', '#ff111f', '#002329'],
        },
        {
          name: 'color3',
          selected: false,
          color: ['#ff69b4', '#da70d6', '#9370db', '#3cb371', '#7b68ee', '#00fa9a', '#612500'],
        },
      ],
    }
  },
  computed: {},
  watch: {},
  methods: {},
  created() {
    axios(
      {
        url: 'http://10.2.11.3:9080/resserve/api/component/user/getOrgInfoTree',
        method: 'post',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      },
      {
        orgId: '',
      }
    )
      .then(response => {
        console.log(response)
        // 处理返回结果，比如存储access token或者进行其他操作
      })
      .catch(error => {
        console.error(error)
      })
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
}
</script>
<style lang="less" scoped>
.co-item {
  width: 20px;
  height: 10px;
  display: inline-block;
}
</style>
